<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useBooksStore } from "../stores/books";
import type { Mark } from "../stores/books";

const store = useBooksStore();
const marks = ref<Mark[]>([]);
const filterBookId = ref<string>("");

async function load() {
  marks.value = await store.getMarks(filterBookId.value || undefined);
}

onMounted(async () => {
  await store.loadBooks();
  await load();
});

async function remove(id: string) {
  await store.deleteMark(id);
  await load();
}
</script>

<template>
  <div class="page">
    <div class="filters">
      <select v-model="filterBookId" @change="load">
        <option value="">全部书籍</option>
        <option v-for="b in store.books" :key="b.id" :value="b.id">{{ b.title }}</option>
      </select>
    </div>

    <ul class="mark-list">
      <li v-for="m in marks" :key="m.id" class="mark-item">
        <div class="title">{{ store.books.find(b=>b.id===m.bookId)?.title || '未知书籍' }}</div>
        <div class="text">"{{ m.text }}"</div>
        <div class="note" v-if="m.note">备注：{{ m.note }}</div>
        <div class="time">{{ new Date(m.createdAt).toLocaleString() }}</div>
        <button class="del" @click="remove(m.id)">删除</button>
      </li>
      <li v-if="!marks.length" class="empty">暂无标记</li>
    </ul>
  </div>
</template>

<style scoped>
.page { padding: 12px; }
.filters { margin-bottom: 8px; }
.mark-list { list-style: none; margin: 0; padding: 0; }
.mark-item { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.title { font-weight: 600; margin-bottom: 4px; }
.text { color: #333; }
.note { color: #555; font-size: 14px; margin-top: 6px; }
.time { color: #888; font-size: 12px; margin-top: 6px; }
.del { margin-top: 8px; padding: 6px 10px; border: 1px solid #ddd; background: #fff; border-radius: 6px; }
.empty { text-align: center; color: #888; padding: 20px 0; }
</style>
